<script setup lang="ts">
import {computed, ref, watch} from "vue";
import {
  Watermark as AWatermark,
  ConfigProvider as AConfigProvider
} from "ant-design-vue";
import { useApplicationStore } from "@/store/Application.store.ts";
import zhCN from 'ant-design-vue/es/locale/zh_CN';

const applicationStore = useApplicationStore();

const theme = ref({
  token: {
    colorPrimary: applicationStore.getAppTheme,
    colorText: applicationStore.getAppTextColor,
    colorBgContainer: applicationStore.getAppBackgroundColor,
  },
  inherit: true,
});



const appTheme = computed(() => applicationStore.getAppTheme);
watch(appTheme, () => {
  let timer = 0;
  if (timer !== 0) {
    return;
  }
  timer = setTimeout(() => {
    theme.value.token.colorPrimary = appTheme.value;
    timer = 0;
  }, 500);
})

applicationStore.initialize();
const waterContent = ref("内部版本请勿外用");

</script>

<template>
  <a-config-provider
      :theme="theme"
      :locale="zhCN"
      @contextmenu.prevent
  >
    <a-watermark :content="waterContent" @contextmenu.prevent>
      <RouterView />
    </a-watermark>
  </a-config-provider>

</template>